
<script setup lang="ts">
import { h, defineComponent, ref } from 'vue'
import { NIcon } from 'naive-ui'
import {
    BookOutline as BookIcon,
    PersonOutline as PersonIcon,
    WineOutline as WineIcon,
    BarChartOutline as WorldIcon
} from '@vicons/ionicons5'
import { NSpace, NLayout, NSwitch, NLayoutHeader, NLayoutSider, NMenu, NLayoutFooter } from 'naive-ui'
import { useRouter } from 'vue-router'
const router = useRouter()


const renderIcon = (icon: any) => {
    return () => h(NIcon, null, { default: () => h(icon) })
}

const menuOptions = [
    {
        label: "首页",
        key: 'home',
        icon: renderIcon(BookIcon)
    },
    {
        label: '资源',
        key: 'source',
        icon: renderIcon(WineIcon),
    },
    {
        label: '世界',
        key: 'world',
        icon: renderIcon(WorldIcon),
    },
    {
        label: '个人',
        key: 'person',
        icon: renderIcon(PersonIcon),
    }
]

const changeRoute = (key: string, data: any) => {
    switch (key) {
        case 'home':
            router.push('/')
            break;
        case 'source':
            router.push('/source')
            break;
        case 'world':
            router.push('/world')
            break;
        case 'person':
            router.push('/person')
            break;
        default:
            break;
    }


}



</script>

<template>
    <n-space vertical>
        <n-layout>
            <n-layout-header class="header" bordered>
                <span class="nav">编程导航</span>
                <!-- <ul :key="item.key" v-for="item in menuOptions">
                    <li>{{ item.label }}</li>
                </ul>-->
                <n-menu @update:value="changeRoute" mode="horizontal" :options="menuOptions" />
            </n-layout-header>
            <!-- <n-layout has-sider>
                <n-layout-sider
                    bordered
                    show-trigger
                    collapse-mode="width"
                    :collapsed-width="64"
                    :width="240"
                    :native-scrollbar="false"
                    style="max-height: 320px;"
                >
                    <n-menu :collapsed-width="64" :collapsed-icon-size="22" :options="menuOptions" />
                </n-layout-sider>
                <n-layout style="max-height: 320px;" />
            </n-layout> -->
            <!-- <n-layout-footer bordered>Footer Footer Footer</n-layout-footer> -->
        </n-layout>
    </n-space>
</template>

<style lang="scss" scoped>
@import "../global.scss";
.header {
    height: 60px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .nav {
        min-width: 200px;
        padding-left: 20px;
    }
}
</style>
